import QtQuick
import QtQuick.Controls
import Gui.Components
import Backend as B

Popup {
    id: root
    closePolicy: Popup.NoAutoClose
    padding: 0
    signal manuSetCurrentHighlight(int index)
    property alias albumCoverSource: _albumCover.albumSource
    property alias lyricsModel: _lyricsListView.model
    property alias currentHightligt: _lyricsListView.currentIndex
    Item {
        id: _headerArea
        width: parent.width
        height: 40
        WindowOperationBar {
            dragWindow: win
            anchors.right: parent.right
        }

        FlatIconButton {
            text: "收起"
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.verticalCenter: parent.verticalCenter
            iconName: "fa.angle-down"
            iconSize: 25
            tipName: "收起"
            onClicked: root.close()
        }
    }
    Item {
        id: _leftArea
        anchors {
            left: parent.left
            right: parent.horizontalCenter
        }
        height: parent.height

        AlbumCover {
            id: _albumCover
            width: 300
            height: 300
            anchors.centerIn: parent
            albumCoverRaduis: 10
        }
    }
    Item {
        id: _rightArea

        anchors {
            left: parent.horizontalCenter
            right: parent.right
            top: parent.top
            bottom: parent.bottom
        }
        Label {
            anchors.centerIn: parent
            font.pixelSize: 64
            text: "暂无歌词"
            visible: _lyricsListView.model.length === 0
        }

        ListView {
            id: _lyricsListView
            width: parent.width
            height: 400
            anchors.centerIn: parent
            anchors.margins: 30
            spacing: 10
            highlightRangeMode: ListView.ApplyRange
            preferredHighlightBegin: height / 2 - 40
            preferredHighlightEnd: height / 2
            ScrollBar.vertical: ScrollBar {
                policy: ScrollBar.AlwaysOff
            }
            delegate: Label {
                id: _delegate
                width: ListView.view.width
                text: modelData
                padding: 5
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: index === _lyricsListView.currentIndex ? palette.highlight : palette.windowText
                font {
                    pixelSize: 20
                    bold: index == 0
                }
                MouseArea {
                    anchors.fill: parent
                    onDoubleClicked: {
                        root.manuSetCurrentHighlight(index);
                    }
                }
            }
            visible: _lyricsListView.model.length !== 0
        }
    }
}
